<template>
  <div style="padding: 0 15px">
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1721032401923" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1924" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32">
      <path :fill="topTheme.includes('linear') ? 'rgba(44, 78, 120, 1)' : '#fff'" d="M832 64H192c-38.4 0-64 25.6-64 64v768c0 38.4 25.6 64 64 64h640c38.4 0 64-25.6 64-64V128c0-38.4-25.6-64-64-64zM288 774.4c-25.6 0-44.8-19.2-44.8-38.4 0-25.6 19.2-44.8 44.8-44.8s44.8 19.2 44.8 44.8c0 25.6-19.2 38.4-44.8 38.4z m0-224c-25.6 0-44.8-12.8-44.8-38.4 0-25.6 19.2-44.8 44.8-44.8s44.8 19.2 44.8 44.8c0 25.6-19.2 38.4-44.8 38.4z m0-224c-25.6 0-44.8-19.2-44.8-38.4 0-25.6 19.2-44.8 44.8-44.8s44.8 19.2 44.8 44.8c0 25.6-19.2 38.4-44.8 38.4z m435.2 448H428.8c-25.6 0-44.8-19.2-44.8-38.4 0-25.6 19.2-44.8 44.8-44.8h300.8c25.6 0 44.8 19.2 44.8 44.8-6.4 25.6-25.6 38.4-51.2 38.4z m0-224H428.8c-25.6 0-44.8-12.8-44.8-38.4 0-25.6 19.2-44.8 44.8-44.8h300.8c19.2 0 38.4 19.2 38.4 44.8 0 25.6-19.2 38.4-44.8 38.4z m0-224H428.8c-25.6 0-44.8-12.8-44.8-38.4 0-25.6 19.2-44.8 44.8-44.8h300.8c25.6 0 44.8 19.2 44.8 44.8-6.4 25.6-25.6 38.4-51.2 38.4z" p-id="1925"></path>
    </svg>
  </div>
</template>

<script setup>
import useSettingsStore from "@/store/modules/settings";

const settingsStore = useSettingsStore();
const topTheme = computed(() => settingsStore.topTheme);

defineProps({
  isActive: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits();
// const toggleClick = () => {
//   emit('toggleClick');
// }
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
